<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <!-- <link rel="stylesheet" href="audio.js"> -->
</head>
<body background="./img/bg0.png">
    <!-- 上半部分 -->
    <div class="upper-container">
        <!-- 唱片 -->
         <div class="album-container">
            <div class="album-img">
            </div>
         </div>
        <!-- 歌词 -->
        <div class="introduction-container">
            <div class="introduction-title">音乐1</div>
            <div class="introduction-text">作者：
                <span id="author-name">歌手名</span>
            </div>
        </div>
    </div>

    <!-- 下半部分 -->
    <div class="audio-box">
        <div class="audio-container">
            <audio id="audio"></audio>
            <!-- 进度条 -->
             <div class="a-progress">
                <div class="pgs-total">
                    <div class="pgs-play" style="width:0%"></div>
                </div>
             </div>
             <!-- 下排控制按钮 -->
            <div class="a-controls">    
                <!-- 播放时间 -->
                <div class="time-container">
                    <span class="played-time">00:00</span>
                    &nbsp;/&nbsp;
                    <span class="audio-time">00:00</span>
                </div>
                <!-- 下排中间按钮 -->
                <div class="center-button-container">
                    <!-- 播放模式 -->
                    <div class="center-icon mode"></div>
                    <!-- 上一首-->
                    <div class="center-icon s-left"></div>
                    <!-- 播放/暂停 -->
                    <div class="center-icon icon-play" id="music-play"></div>
                    <!-- 下一首 -->
                    <div class="center-icon s-right"></div>
                    <!-- 音量按钮 -->
                    <div class="center-icon volumn"></div>
                    <!-- 音量大小调节 -->
                    <input id="volumn-togger" type="range" title="70%" name="change" min="0" max="100" step="1" value="70" />
                </div>
                <!-- 右下角区域按钮 -->
                <div class="bottom-button-container">
                    <!-- 播放列表 -->
                    <div class="button-icon list"></div>
                    <!-- 播放速度 -->
                    <div class="button-icon speed">1.0X</div>
                    <!-- MV播放器 -->
                    <div class="button-icon MV">
                        <video id="video">
                            <source src="./mp4/video0.mp4" type="video/mp4">
                            Your browser does not support the video tag.
                        </video>
                    </div>
                </div>
            </div>
        </div>
     </div>
     
     <!-- 关音乐 -->
    <div class="close-list"></div>
     <!-- 音乐列表 -->
    <div class="music-list">
        <div class="music-list-container">
            <div class="music-list-title">播放列表</div>
            <hr class="line"/>
            <div class="all-list">
                <div class="music0">洛春赋</div>
                <div class="music1">Yesterday</div>
                <div class="music2">江南烟雨色</div>
                <div class="music3">Version</div>
            </div>
        </div>
    </div>
</body>
<script src="./audio.js"></script>
</html>